<template>
    <div>
        <div style="width: 50%">
            <!-- 表格展示部分 -->
            <el-table
                :data="products.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                stripe
                border
                size="small"
                style="width:100%;margin-bottom: 10px;"
            >
                <el-table-column
                    prop="itemIndex"
                    label="序号"
                    width="100px"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="中文标题"
                    align="center"
                    prop="titleZh"
                ></el-table-column>
                <el-table-column
                    label="英文标题"
                    align="center"
                    prop="titleEn"
                ></el-table-column>
                <el-table-column
                    label="图片"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-link
                            type="primary"
                            @click="showImage(scope.row.id)"
                        >查看图片</el-link>
                    </template>
                </el-table-column>
                <el-table-column
                    width="150px"
                    align="center"
                >
                    <template
                        slot="header"
                        slot-scope="scope"
                    >
                        <el-button
                            type="success"
                            @click="insertVisible=true"
                        >新增</el-button>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.row.id)"
                        >编辑</el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row.id)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页栏 -->
            <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                :total="products.length"
                :page-size="pageSize"
                :page-sizes="[5,10]"
                :current-page="currentPage"
                @current-change="changeCurrent"
                @size-change="changeSize"
                align="center"
            ></el-pagination>
        </div>
        <!-- 查看图片的弹窗 -->
        <el-dialog
            :visible.sync="imageVisible"
            :close-on-click-modal="false"
            width="50%"
            style="text-align:center"
        >
            <img
                :src="showUrl + currentShowImageId"
                alt=""
            >
        </el-dialog>
        <!-- 新增产品中心的弹窗 -->
        <el-dialog
            :visible.sync="insertVisible"
            :close-on-click-modal="false"
        >
            <el-form
                class="product-form"
                label-position="right"
                label-width="100px"
            >
                <el-form-item label="中文标题">
                    <el-input v-model="product.titleZh"></el-input>
                </el-form-item>
                <el-form-item label="英文标题">
                    <el-input v-model="product.titleEn"></el-input>
                </el-form-item>
                <el-form-item label="内容">

                    <el-input
                        type="textarea"
                        v-model="product.content"
                        :rows="5"
                        autosize
                    ></el-input>
                </el-form-item>
                <el-form-item label="序号">
                    <el-input
                        v-model="product.itemIndex"
                        onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                        onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload
                        ref="upload"
                        :action="uploadUrl"
                        :before-upload="beforeUpload"
                        :on-success="afterUpload"
                        :auto-upload="false"
                        :data="product"
                    >
                        <el-button
                            slot="trigger"
                            type="primary"
                        >选择图片</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="success"
                        @click="submit"
                    >提交</el-button>
                    <el-button
                        type="danger"
                        @click="reset"
                    >重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 修改产品中心的弹窗 -->
        <el-dialog
            :visible.sync="updateVisible"
            :close-on-click-modal="false"
        >
            <el-form
                class="product-form"
                label-position="right"
                label-width="100px"
            >
                <el-form-item label="中文标题">
                    <el-input v-model="currentProduct.titleZh"></el-input>
                </el-form-item>
                <el-form-item label="英文标题">
                    <el-input v-model="currentProduct.titleEn"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <div ref="editor"></div>
                </el-form-item>
                <el-form-item label="序号">
                    <el-input
                        v-model="currentProduct.itemIndex"
                        onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                        onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="是否更换图片">
                    <el-radio-group v-model="changeImage">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item
                    label="图片"
                    v-if="changeImage"
                >
                    <el-upload
                        ref="update"
                        :action="updateUrl"
                        :before-upload="beforeUpload"
                        :on-success="afterUpload"
                        :auto-upload="false"
                        :data="currentProduct"
                    >
                        <el-button
                            slot="trigger"
                            type="primary"
                        >选择图片</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="success"
                        @click="update"
                    >完成</el-button>
                    <el-button
                        type="danger"
                        @click="reset"
                    >重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>
<script>
import E from "wangeditor";
export default {
    data() {
        return {
            products: [],
            currentProduct: {},
            currentPage: 1,
            pageSize: 10,
            insertVisible: false,
            updateVisible: false,
            imageVisible: false,
            currentShowImageId: 0,
            changeImage: false,
            product: {
                titleZh: "",
                titleEn: "",
                content: "",
                index: 0
            },
            imageTypes: [
                "image/jpg",
                "image/jpeg",
                "image/png",
                "image/pjpeg",
                "image/gif",
                "image/bmp",
                "image/x-png"
            ],
            uploadUrl: this.$uploadPath + "/product/insert",
            updateUrl: this.$uploadPath + "/product/updateImage",
            showUrl: this.$uploadPath + "/product/getImage?id=0",
            editor: null
        };
    },
    watch: {
        changeImage(newValue, oldValue) {
            if (newValue) {
                delete this.currentProduct.image;
            }
        }
    },
    methods: {
        // 初始化富文本编辑器
        initEditor() {
            this.editor = new E(this.$refs.editor);
            // this.editor.customConfig.uploadImgShowBase64 = true;
            this.editor.customConfig.showLinkImg = false;
            this.editor.customConfig.onchange = html => {
                this.editorContent = html;
            };
            this.editor.customConfig.zIndex = 100;
            this.editor.create();
        },
        getProducts() {
            this.$http("/product/getAll")
                .then(response => {
                    this.products = response.data;
                })
                .catch(err => err);
        },
        submit() {
            this.$refs.upload.submit();
        },

        update() {
            this.currentProduct["content"] = this.editor.txt.html();
            if (this.changeImage) {
                this.$refs.update.submit();
            } else {
                this.currentProduct["image"] = null;
                this.$http({
                    url: "/product/update",
                    method: "post",
                    headers: {
                        "Content-Type":
                            "application/x-www-form-urlencoded; charset=UTF-8"
                    },
                    params: this.currentProduct
                })
                    .then(response => {
                        this.$message({
                            message: response.data.message,
                            type: "success"
                        });
                        this.updateVisible = false;
                        this.getProducts();
                    })
                    .catch(err => err);
            }
        },
        reset() {},
        beforeUpload: function(file) {
            if (file == null) {
                return false;
            }
            // 判断上传的文件的大小，格式是否符合规范
            if (this.imageTypes.indexOf(file.type) == -1) {
                this.$message({
                    message: "请检查上传图片格式的文件",
                    type: "error"
                });
                return false;
            } else if (file.size / 1024 / 1024 > 2) {
                this.$message({
                    message: "文件大于2M，请压缩",
                    type: "error"
                });
                return false;
            } else {
            }
        },
        afterUpload: function(response, file, fileList) {
            this.getProducts();
            this.insertVisible = false;
            this.updateVisible = false;
            this.$message({ message: response.message, type: "success" });
            this.product = {
                titleZh: "",
                titleEn: "",
                content: "",
                index: 0
            };
        },
        // 根据id编辑动态
        handleEdit(id) {
            this.updateVisible = true;

            this.$http("/product/getProductById?id=" + id).then(response => {
                this.currentProduct = response.data;
                this.initEditor();
                this.editor.txt.html(this.currentProduct.content);
            });
        },
        // 根据ID删除动态
        handleDelete(id) {
            this.$confirm("确认删除？删除后不可恢复！", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$http("/product/delete?id=" + id)
                        .then(response => {
                            this.$message({
                                type: "success",
                                message: response.data.message
                            });
                            this.getProducts();
                        })
                        .catch(err => err);
                })
                .catch(() => {});
        },
        // 改变当前的页码
        changeCurrent(currentPage) {
            this.currentPage = currentPage;
        },
        // 改变当前的显示条数
        changeSize(pageSize) {
            this.pageSize = pageSize;
        },
        // 点击查看图片
        showImage(id) {
            this.currentShowImageId = id;
            this.imageVisible = true;
        }
    },
    mounted() {
        this.getProducts();
    }
};
</script>

<style>
.product-form .el-input,
.el-textarea {
    width: 400px;
}
</style>